.loadingUI {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);
  .loadingContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
  }
  .k-ball7a {
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    background: #19a68c;
    animation-delay: -1.5s;
  }
  .k-ball7b {
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    background: #f63d3a;
    animation-delay: -1s;
  }
  .k-ball7c {
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    background: #fda543;
    animation-delay: -0.5s;
  }
  .k-ball7d {
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    background: #193b48;
  }
}
@keyframes k-loadingO {
  0%,
  100% {
    transform: translate(0);
  }
  25% {
    transform: translate(160%);
  }
  50% {
    transform: translate(160%, 160%);
  }
  75% {
    transform: translate(0, 160%);
  }
}
